<template>
  <div id="staffAudit">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="realname" label="姓名" width="180" />
      <el-table-column prop="telephone" label="手机号" />
      <el-table-column prop="idCard" label="身份证号" />
      <el-table-column prop="bankCard" label="银行卡号" />
      <el-table-column prop="registerTime" label="注册时间" />
      <el-table-column prop="status" label="状态" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="audit(scope.row)">审核</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="block">
      <span class="demonstration" />
      <el-pagination :current-page.sync="currentPage1" :page-size="pageSize" layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 审核模态框 -->
    <el-dialog title="审核员工" :visible.sync="dialogVisible" width="50%">
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"><p>用户名：{{ username }}</p></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"> <p>身份证号：{{ idCard }}</p></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>身份证正面照</p>
            <div class="img">
              <el-image>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <p>身份证反面照</p>
            <div class="img">
              <el-image>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="pass">审核通过</el-button>
        <el-button type="danger" @click="nopass">拒绝审核</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
import qs from 'querystring'
export default {
  data() {
    return {
      input: '',
      tableData: [],
      currentPage1: 1,
      pageSize: 6,
      total: 0,
      dialogVisible: false,
      idcardPhotoNegative: '',
      idcardPhotoPositive: '',
      username: '',
      idCard: ''
    }
  },
  created() {
    this.auditQuery()
  },
  methods: {
    // 给审核通过绑定事件
    pass() {
      this.dialogVisible = false
      this.$message({
        message: '审核成功',
        type: 'success'
      })
    },
    // 给拒绝审核绑定事件
    nopass() {
      this.dialogVisible = false
      this.$message({
        message: '拒绝成功',
        type: 'success'
      })
    },
    // 员工审核
    audit(row) {
      // alert(row.id)
      this.dialogVisible = true
      this.username = row.username
      this.idCard = row.idCard
      this.idcardPhotoPositive = row.idcardPhotoPositive
      this.idcardPhotoNegative = row.idcardPhotoNegative
    },

    // 分页查询员工审核信息
    auditQuery() {
      var data = {
        page: this.currentPage1 - 1,
        pageSize: this.pageSize
      }
      this.$axios.post('/waiter/query', qs.stringify(data)).then((response) => {
        // console.log(response)
        this.tableData = response.data.data.list
        this.total = response.data.data.total
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage1 = val
      this.auditQuery()
    }
  }

}
</script>
<style lang="scss" scoped>
    #staffAudit{
      padding: 20px;
      .img{
        width: 250px;
        height: 120px;
        border: 1px solid grey;
    }
    }

</style>

